<template>
    <view class="featured clearfix">
        <view class="title">
            <text class="h1">美宿推荐</text><text class="desc">最喜欢的推荐</text>
        </view>
        <view class="line"></view>
        <view class="content-item">
            <view class="left">
                <image class="left-img" src="http://newscover-zj.tourzj.com/2020/01/08/02005604dbf499ff63fa0857e3c9d7359e3aab.png!300X300" mode="aspectFit"></image>
            </view>
            <view class="right">
                <view class="title">泡汤何必去日本？浙江8家颜值超高的温泉民宿，最适合冬天去！</view>
                <view class="info">
                    <text class="nums">144435人阅读</text>/
                    <text class="date">  2020-06-19</text>
                </view>
            </view>
        </view>
        <view class="content-item">
            <view class="left">
                <image class="left-img" src="http://newscover-zj.tourzj.com/2019/12/19/011903e7ee4416cfdfd09e5b7334ad69d2d3dd.jpg!300X300" mode="aspectFit"></image>
            </view>
            <view class="right">
                <view class="title">山林美宿，浙边角落里也私藏了一份精致慢生活【冬日美宿】</view>
                <view class="info">
                    <text class="nums">312855人阅读</text>/
                    <text class="date">  2020-06-19</text>
                </view>
            </view>
        </view>
    </view>
</template>

<script>
</script>

<style>
    .line{
        height: 1px;
        background-color: #efefef;
        margin-bottom: 20px;
    }
    .featured{
        margin: 10px 10px;
    }
    .title{
        margin: 20px 0;
    }
    .h1{
        border-left: 5px solid #007AFF;
        font-size: 15px;
        padding: 0 10px;
    }
    .desc{
        margin-left: 10px;
        font-size: 12px;
        color: #ccc3c6;
    }
    .clearfix:after{
        content: "";
        display: block;
        height: 0;
        clear:both;
        visibility: hidden;
    }
    .clearfix{
        *zoom: 1;
    }
    .content-item{
        display: flex;
        padding-bottom:20px;
        margin-bottom: 20px;
        border-bottom: 1px solid #efefef;
    }
    .left-img{
        height: 5.5rem;
        width: 5.5rem;
        margin: 5px;
    }
    .right{
        margin: 0 5px;
    }
    .title{
        font-size: 14px
    }
    .info{
        font-size: 10px;
    }
    .nums{
        margin: 7px 7px 7px 0;
    }
    .date{
        margin: 7px;
    }
</style>
